function lunBoTu() {
    var banner = document.getElementById("banner");
    var bannerOl = banner.getElementsByTagName("ol")[0];
    var bannerUl = banner.getElementsByTagName("ul")[0];
    var bannerUlLis = bannerUl.getElementsByTagName("li");
    var bannerOlLis = bannerUl.getElementsByTagName("li");

    //实现轮播图效果
    bannerOlLis[0].className = 'active';
    var cw = parseInt(pbc.getStyle(banner, "width"));

    var n = 0;
    var t = setInterval(auto, 2000);

    bannerUl.onmouseenter = function () {
        clearInterval(t);
    }
    bannerUl.onmouseleave = function () {
        t = setInterval(auto, 2000);
    }

    for (var i = 0; i < bannerUlLis.length; i++) {
        bannerUlLis[i].index = i;
        bannerUlLis[i].onclick = function () {
            n = this.index - 1;
            bannerOl.style.left = -n * cw + "px";
            auto();
        }
    }

    function auto() {
        n++;
        if (n == bannerUlLis.length + 1) {
            n = 0;
            bannerOl.style.left = -n * cw + "px";
            n = 1;
        }

        pbc.move(bannerOl, "left", 40, -n * cw);
        for (var i = 0; i < bannerUlLis.length; i++) {
            bannerUlLis[i].className = "";
        }

        bannerUlLis[n == bannerUlLis.length ? 0 : n].className = "active";

    }


}

function readCourse(val, con) {
    let str = '';
    if (val.code == 200) {
        let str = '';
        for (let item of val.data) {            
            str += `<li>
                        <a href="page/video_detail.html?cid=${item.cid}">
                            <div>
                                <img src="${item.image_src}" alt="">
                                <span>${item.type_name}</span>
                                <span>1100人在学习</span>
                            </div>
                            <div>
                                <p>
                                    <span>${item.title}</span>
                                    <span>23课时</span>
                                </p>
                                <p>
                                    ${item.price==0 ? '免费学习' : item.price+"元"}
                                </p>
                            </div>
                        </a>
                    </li>`
        }
        $('' + con + ' ul:eq(0)').html(str);
    }
}
window.onload = function () {


    //ajax渲染轮播图
    $.ajax({
        type: "get",
        url: "/v1/banner",
        data: null,
        dataType: "json",
        success: function (response) {
            if (response.code == 200) {
                let olHtml = '';
                let ulHtml = '';
                for (let item of response.data) {

                    olHtml += `<li> <img src="${item.image_src}" alt=""></li>`;
                    ulHtml += `<li><span class="iconfont">&#xeb22;</span>${item.title}</li>`
                }
                $('#banner ol:eq(0)').html(olHtml + `<li> <img src="${response.data[0].image_src}" alt=""></li>`);
                $('#banner ul:eq(0)').html(ulHtml);
            }
            lunBoTu();
        }
    });



    async function fn() {
        let a = await sendAjax({
            url: "/v1/courselist?type=1&num=8"
        });
        let b = await sendAjax({
            url: "/v1/courselist?type=2&num=6"
        });

        readCourse(a, '#course');
        readCourse(b, '#course1');

    }
    fn();

    //渲染在线测试
    var test = document.getElementById('test');
    var testUl = test.getElementsByTagName('ul')[0];

    var testUlHtml = '';

    for (var i = 0; i < lesson.test.length; i++) {
        testUlHtml += '<li>\
        <a href="page/video_detail.html">\
            <div>\
                <img src="' + lesson.test[i].src + '" alt="">\
                <span>' + lesson.test[i].cont + '</span>\
                <p>\
                    <span>' + lesson.test[i].num + '人已考试</span>\
                    <span>' + lesson.test[i].time + '</span>\
                </p>\
            </div>\
            <div>\
                <p>\
                    <span>' + lesson.test[i].title + '</span>\
                </p>\
                <p>\
                    去考试\
                </p>\
            </div>\
        </a>\
    </li>';
    }
    testUl.innerHTML = testUlHtml;


    //返回顶部按钮
    var returnTop = document.getElementById('return_top');
    var returnTopImgs = returnTop.getElementsByTagName('img');
   

    returnTopImgs[2].onclick = function () {
        document.documentElement.scrollTop = 0;
    }
    window.onscroll = function () {
        if (document.documentElement.scrollTop >= 430) {
            returnTop.style.display = 'block';
        } else {
            returnTop.style.display = 'none';
        }
    }

}

$('#search').on('click',()=>{    
    window.location.href='./page/search_list.html?keyword='+($('#search_input').val())
})